<template>
<el-popover ref="top" :placement="placement" trigger="click" :width="width" v-model:visible="popup">
    <template #reference>
        <div ref="reference"><slot></slot></div>
        
    </template>
    <div>
        <h4 v-show="!!title">{{title}}</h4>
        <span v-show="!!content">{{content}}</span>
        <slot name="content"></slot>
        <div class="row end">
            <n-button v-if="!!textCancel" @click="cancel">{{textCancel}}</n-button>
            <n-button @click="ok">{{textOk}}</n-button>
        </div>
    </div>
</el-popover>
</template>

<script lang="ts" setup>
import {ref, withDefaults, Ref } from 'vue'

interface Props {
    title?: string ,
    content?: string ,
    placement?: string, 
    trigger?: string, 
    width?: number,
    textOk?: string ,
    textCancel?: string ,
    popup: boolean,
}
const props = withDefaults(
    defineProps<Props>()
    , {
        popup:false ,
        textOk:"确认" ,
        textCancel:"取消" ,
    }
)

const emit = defineEmits(["cancel", "ok", "update:popup"])
const reference = ref(null) as unknown as Ref<HTMLElement>
const top = ref(null) as unknown as Ref<HTMLElement>

function cancel() {
    emit('update:popup', false) 
    emit("cancel")
}
function ok() {
    emit("update:popup", false)
    emit("ok")
}

$(document).click((e)=>{
    if(!props.popup) {
        return
    }
    let parents = $(e.target).parents().toArray()
    console.log(reference.value, parents.includes(top.value))
    if(parents.includes(reference.value) || parents.includes(top.value)) {
        return
    }
    emit("update:popup", false)
})

</script>